<script lang="ts" setup>
const {history, clearHistory} = $(useSearch())
</script>

<template>
    <view between my>
        <view center>
            <image w-32 h-32 src="/static/images/icons/search/time.svg"/>
            <text ml-1 text="30 #333333">搜索历史</text>
        </view>
        <image class="w-32 h-32" src="/static/images/icons/search/trash_can.svg" @click="clearHistory"/>
    </view>
    <view items-center gap-3 flex="~ wrap">
        <navigator v-for="(item, key) in history" :key="key" :url="`/pages/search/index?content=${item}`"
                   open-type="navigate"
                   hover-class="navigator-hover">
            <view px-4 py-1 center rounded-full bg="#f2f2f2">
                <text text="22 #7f7f7f">
                    {{ item }}
                </text>
            </view>
        </navigator>
    </view>
</template>
